/**
 * CSS Houdini Paint Worklet for Cubic Bezier Rounded Corners
 * Based on the cuboxPath implementation
 */

// Control Point Adjusting function (same as cubox-path.js)
const control = (x, y, inc, dir) => {
  const [w1, h1, w2, h2] = {
    TL: [0, -inc, -inc, 0],
    TR: [inc, 0, 0, -inc],
    BR: [0, inc, inc, 0],
    BL: [-inc, 0, 0, inc]
  }[dir];
  return [x + w1, y + h1, x + w2, y + h2];
};

// Curve drawing function adapted for Canvas 2D API
const drawCurveTo = (ctx, dir, type, cornerW, cornerH, radW, radH, inc) => {
  if (type === 'C') {
    const [cp1x, cp1y, cp2x, cp2y] = control(cornerW, cornerH, inc, dir);
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, radW, radH);
  } else {
    ctx.lineTo(cornerW, cornerH);
    ctx.lineTo(radW, radH);
  }
};

// Main paint function
const drawCuboxPath = (ctx, size, radius, strokeWidth = 0, corners = {}) => {
  const { width: w, height: h } = size;
  const { max, min } = Math;

  // Calculate radius and positions (same logic as cubox-path.js)
  const radi = max(min(radius, min(w, h) / 2), 15);
  const HHR = radi;
  const WHR = radi;
  const HTR = h - HHR;
  const WTR = w - WHR;

  const off = min(radi, strokeWidth);
  const HH = off;
  const WH = off;
  const HT = h - HH;
  const WT = w - WH;

  const inc = min(radi / off, off) / 2;

  const finalCorners = { TL: 'C', TR: 'C', BR: 'C', BL: 'C', ...corners };

  // Start path
  ctx.beginPath();
  ctx.moveTo(WH, HHR);

  // Top-left corner
  drawCurveTo(ctx, 'TL', finalCorners['TL'], WH, HH, WHR, HH, inc);
  ctx.lineTo(WTR, HH);

  // Top-right corner
  drawCurveTo(ctx, 'TR', finalCorners['TR'], WT, HH, WT, HHR, inc);
  ctx.lineTo(WT, HTR);

  // Bottom-right corner
  drawCurveTo(ctx, 'BR', finalCorners['BR'], WT, HT, WTR, HT, inc);
  ctx.lineTo(WHR, HT);

  // Bottom-left corner
  drawCurveTo(ctx, 'BL', finalCorners['BL'], WH, HT, WH, HTR, inc);
  ctx.lineTo(WH, HHR);

  ctx.closePath();
};

class CuboxPaint {
  static get inputProperties() {
    return [
      // Global corner properties
      '--corner-radius',
      '--corner-sharpness',
      
      // Individual corner radius properties
      '--corner-radius-top-left',
      '--corner-radius-top-right',
      '--corner-radius-bottom-right',
      '--corner-radius-bottom-left',
      
      // Individual corner sharpness properties
      '--corner-sharpness-top-left',
      '--corner-sharpness-top-right',
      '--corner-sharpness-bottom-right',
      '--corner-sharpness-bottom-left',
      
      // Style properties
      'background-color',
      'border-width',
      'border-color',
      'border-style'
    ];
  }

  paint(ctx, size, properties) {

    const width = size.width;
    const height = size.height;

    // Parse CSS custom properties
    const getProperty = (name, defaultValue) => {
      const value = properties.get(name);
      if (!value || value.toString().trim() === '') return defaultValue;
      return parseFloat(value.toString()) || defaultValue;
    };

    const getColorProperty = (name, defaultValue) => {
      const value = properties.get(name);
      if (!value || value.toString().trim() === '') return defaultValue;
      return value.toString();
    };

    // Global properties
    const globalRadius = getProperty('--corner-radius', 20);
    const globalSharpness = getProperty('--corner-sharpness', 1);

    // Individual corner properties (fallback to global if not set)
    const topLeftRadius = getProperty('--corner-radius-top-left', globalRadius);
    const topRightRadius = getProperty('--corner-radius-top-right', globalRadius);
    const bottomRightRadius = getProperty('--corner-radius-bottom-right', globalRadius);
    const bottomLeftRadius = getProperty('--corner-radius-bottom-left', globalRadius);

    const topLeftSharpness = getProperty('--corner-sharpness-top-left', globalSharpness);
    const topRightSharpness = getProperty('--corner-sharpness-top-right', globalSharpness);
    const bottomRightSharpness = getProperty('--corner-sharpness-bottom-right', globalSharpness);
    const bottomLeftSharpness = getProperty('--corner-sharpness-bottom-left', globalSharpness);

    // Style properties
    const backgroundColor = getColorProperty('background-color', 'transparent');
    const borderWidth = getProperty('border-width', "10px");
    const borderColor = getColorProperty('border-color', '#000000');
    const borderStyle = getColorProperty('border-style', 'solid');

    // For now, use the largest radius for the path calculation
    // TODO: Individual corner radius support would require path modification
    const radius = Math.max(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
    
    // Determine corner types based on sharpness (lower sharpness = more linear)
    const getCornerType = (sharpness) => sharpness > 0.5 ? 'C' : 'L';
    
    const corners = {
      TL: getCornerType(topLeftSharpness),
      TR: getCornerType(topRightSharpness),
      BR: getCornerType(bottomRightSharpness),
      BL: getCornerType(bottomLeftSharpness)
    };

    // Draw background
    // if (backgroundColor !== 'transparent') {
    //   drawCuboxPath(ctx, { width, height }, radius, 0, corners);
    //   ctx.fillStyle = backgroundColor;
    //   ctx.fill();
    // }

    // Draw border if specified
    // if (borderWidth > 0 && borderStyle !== 'none') {
      ctx.strokeStyle = "black";
      ctx.lineWidth = 1;
      drawCuboxPath(ctx, { width, height }, radius, borderWidth, corners);
      
      // // Handle different border styles
      // if (borderStyle === 'dashed') {
      //   ctx.setLineDash([borderWidth * 3, borderWidth * 2]);
      // } else if (borderStyle === 'dotted') {
      //   ctx.setLineDash([borderWidth, borderWidth]);
      // } else {
      //   ctx.setLineDash([]);
      // }
      
      ctx.stroke();
    }
  // }
}

// Register the paint worklet
registerPaint('cubox', CuboxPaint);
